<template>
	<view class="order-container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<image class="search-icon" src="/static/svg/search.svg"></image>
				<input type="text" placeholder="搜索订单......" />
			</view>
		</view>
		
		<!-- 订单状态选项卡 -->
		<view class="order-tabs">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index" 
				class="tab-item" 
				:class="{ active: activeTab === tab }"
				@click="switchTab(tab)"
			>
				<text>{{ tab }}</text>
			</view>
		</view>
		
		<!-- 订单列表 -->
		<view class="order-list">
			<!-- 待付款订单 -->
			<view class="order-item" v-for="(order, index) in orderList" :key="index" @click="(event) => goToOrderDetail(order, event)">
				<view class="order-header">
					<view class="order-number">订单号: {{ order.id }}</view>
					<view class="order-status" :class="getStatusClass(order.status)">
						{{ order.status }}{{ order.needMembers ? ', 差' + order.needMembers + '人成团' : '' }}
					</view>
				</view>
				<view class="order-content">
					<image class="product-image" :src="order.product.image" mode="aspectFill"></image>
					<view class="product-info">
						<view class="product-title">{{ order.product.name }}</view>
						<view class="product-sku">{{ order.product.sku }}</view>
						<view class="group-tag" v-if="order.product.groupSize">
							<image class="group-tag-icon" src="/static/svg/group-tag.svg"></image>
						</view>
					</view>
					<view class="product-price-info">
						<view class="product-price">¥{{ order.product.price }}</view>
						<view class="product-count">×{{ order.product.count }}</view>
					</view>
				</view>
				<view class="order-footer">
					<view class="order-info">
						<view class="total-price">实付: ¥{{ order.totalPrice }}</view>
						<view class="order-time">{{ order.createTime }}</view>
						<!-- 物流信息 -->
						<view class="order-tracking" v-if="order.expressCompany && order.trackingNumber">
							<text>{{ order.expressCompany }}: {{ order.trackingNumber }}</text>
						</view>
					</view>
					<view class="order-actions">
						<button class="btn btn-cancel" @click="(event) => { event.stopPropagation(); cancelOrder(order.id); }" v-if="order.status === '待付款' || order.status === '待分享'">取消订单</button>
						<button class="btn btn-pay" @click="(event) => { event.stopPropagation(); goPay(order.id); }" v-if="order.status === '待付款'">去支付</button>
						<button class="btn btn-share" @click="(event) => { event.stopPropagation(); shareOrder(order.id); }" v-if="order.status === '待分享'">
							<image src="/static/svg/invite-friends.svg" class="btn-icon"></image>
							邀请好友拼单
						</button>
						<button class="btn btn-track" @click="(event) => { event.stopPropagation(); trackOrder(order.id); }" v-if="order.status === '待收货'">查看物流</button>
						<button class="btn btn-confirm" @click="(event) => { event.stopPropagation(); confirmReceipt(order.id); }" v-if="order.status === '待收货'">确认收货</button>
						<button class="btn btn-review" @click="(event) => { event.stopPropagation(); goReview(order.id); }" v-if="order.status === '待评价'">去评价</button>
						<button class="btn btn-rebuy" @click="(event) => { event.stopPropagation(); rebuy(order.id); }" v-if="order.status === '待评价'">再次购买</button>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="orderList.length === 0">
				<image src="/static/svg/wait-comment.svg" class="empty-icon"></image>
				<view class="empty-text">暂无订单数据</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 订单数据
const orderList = ref([]);

// 选项卡数据
const tabs = ['全部', '待付款', '待分享', '待发货', '待收货', '待评价'];

// 当前选中的状态标签
const activeTab = ref('全部');

// 获取状态样式类
const getStatusClass = (status) => {
	const classMap = {
		'待付款': 'status-wait-pay',
		'待分享': 'status-wait-share',
		'待发货': 'status-wait-ship',
		'待收货': 'status-wait-receive',
		'待评价': 'status-wait-comment'
	};
	return classMap[status] || '';
};

// 模拟获取订单数据
const fetchOrders = (status = '') => {
	// 这里应该是真实的接口调用
	console.log('获取订单数据:', status);
	
	// 所有状态的模拟数据
	const allOrders = [
		{
			id: '4186283277',
			status: '待付款',
			product: {
				name: '艾丽莎抹茶蛋糕早点低糖健康',
				image: '/static/svg/cake-slice.svg',
				sku: '实惠装',
				price: 136,
				count: 1,
				groupSize: 3
			},
			totalPrice: 136,
			createTime: '2023-11-10 10:21:33'
		},
		{
			id: '4186283278',
			status: '待分享',
			needMembers: 1,
			product: {
				name: '艾丽莎抹茶蛋糕早点低糖健康',
				image: '/static/svg/cake-slice.svg',
				sku: '实惠装',
				price: 136,
				count: 1,
				groupSize: 3
			},
			totalPrice: 136,
			createTime: '2023-11-09 15:32:11'
		},
		{
			id: '4186283279',
			status: '待发货',
			product: {
				name: '巧克力曲奇饼干礼盒装',
				image: '/static/svg/cookie.svg',
				sku: '家庭装',
				price: 89,
				count: 2,
				groupSize: 0
			},
			totalPrice: 178,
			createTime: '2023-11-08 09:17:45',
			paidTime: '2023-11-08 09:20:18'
		},
		{
			id: '4186283280',
			status: '待收货',
			product: {
				name: '法式牛角面包新鲜出炉',
				image: '/static/svg/bread.svg',
				sku: '6个装',
				price: 45,
				count: 3,
				groupSize: 0
			},
			totalPrice: 135,
			createTime: '2023-11-05 16:42:22',
			paidTime: '2023-11-05 16:45:37',
			shipTime: '2023-11-06 10:15:29',
			expressCompany: '顺丰速运',
			trackingNumber: 'SF1234567890'
		},
		{
			id: '4186283281',
			status: '待评价',
			product: {
				name: '焦糖玛奇朵蜂蜜蛋糕',
				image: '/static/svg/honey-cake.svg',
				sku: '豪华装',
				price: 168,
				count: 1,
				groupSize: 0
			},
			totalPrice: 168,
			createTime: '2023-11-01 14:10:05',
			paidTime: '2023-11-01 14:12:37',
			shipTime: '2023-11-02 09:30:18',
			receiveTime: '2023-11-03 15:22:46',
			expressCompany: '中通快递',
			trackingNumber: 'ZT9876543210'
		}
	];
	
	// 根据当前选中标签过滤订单
	if (status && status !== '全部') {
		orderList.value = allOrders.filter(order => order.status === status);
	} else {
		orderList.value = allOrders;
	}
};

// 切换标签
const switchTab = (tab) => {
	activeTab.value = tab;
	fetchOrders(tab === '全部' ? '' : tab);
};

// 取消订单
const cancelOrder = (orderId) => {
	console.log('取消订单:', orderId);
	// 调用取消订单接口
	uni.showModal({
		title: '提示',
		content: '确定要取消订单吗？',
		success: function (res) {
			if (res.confirm) {
				console.log('用户点击确定');
				// 调用接口取消订单
				uni.showToast({
					title: '订单已取消',
					icon: 'success'
				});
			}
		}
	});
};

// 去支付
const goPay = (orderId) => {
	console.log('去支付:', orderId);
	// 跳转到支付页面
	uni.navigateTo({
		url: '/pages/pay/index?orderId=' + orderId
	});
};

// 邀请好友拼单
const shareOrder = (orderId) => {
	console.log('邀请好友拼单:', orderId);
	// 调用分享功能
	uni.share({
		provider: "weixin",
		scene: "WXSceneSession",
		type: 0,
		title: "邀请您参与拼团",
		summary: "好友邀请您一起拼团购买艾丽莎抹茶蛋糕早点低糖健康",
		imageUrl: "/static/svg/cake-slice.svg",
		href: "https://www.example.com/group?id=" + orderId,
		success: function (res) {
			console.log("分享成功：", res);
		},
		fail: function (err) {
			console.log("分享失败：", err);
		}
	});
};

// 查看物流信息
const trackOrder = (orderId) => {
	console.log('查看物流:', orderId);
	uni.navigateTo({
		url: `/pages/my/order/logistics?orderId=${orderId}`
	});
};

// 确认收货
const confirmReceipt = (orderId) => {
	console.log('确认收货:', orderId);
	uni.showModal({
		title: '确认收货',
		content: '确认已收到商品吗？',
		success: function (res) {
			if (res.confirm) {
				// 调用确认收货接口
				uni.showToast({
					title: '已确认收货',
					icon: 'success'
				});
				// 重新获取订单列表
				fetchOrders(activeTab.value === '全部' ? '' : activeTab.value);
			}
		}
	});
};

// 去评价
const goReview = (orderId) => {
	console.log('去评价:', orderId);
	uni.navigateTo({
		url: `/pages/my/order/review?orderId=${orderId}`
	});
};

// 再次购买
const rebuy = (orderId) => {
	console.log('再次购买:', orderId);
	// 将商品添加到购物车
	uni.showToast({
		title: '已加入购物车',
		icon: 'success'
	});
	// 跳转到购物车页面
	setTimeout(() => {
		uni.switchTab({
			url: '/pages/cart/index'
		});
	}, 1500);
};

// 根据订单状态跳转到不同页面
const goToOrderDetail = (order, event) => {
	// 阻止事件冒泡到按钮上
	if (event) {
		event.stopPropagation();
	}
	
	const orderId = order.id;
	const status = order.status;
	
	let url = '';
	
	switch(status) {
		case '待付款':
			url = `/pages/my/order/view?orderId=${orderId}`;
			break;
		case '待分享':
			url = `/pages/my/order/share?orderId=${orderId}`;
			break;
		case '待发货':
			url = `/pages/my/order/shipment?orderId=${orderId}`;
			break;
		case '待收货':
			url = `/pages/my/order/receipt?orderId=${orderId}`;
			break;
		case '待评价':
			url = `/pages/my/order/evaluate?orderId=${orderId}`;
			break;
		default:
			url = `/pages/my/order/view?orderId=${orderId}`;
	}
	
	uni.navigateTo({
		url: url
	});
};

onMounted(() => {
	fetchOrders();
});
</script>

<style>
.order-container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.search-bar {
	padding: 20rpx 30rpx;
	background-color: #fff;
}

.search-input {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	padding: 10rpx 20rpx;
	border-radius: 50rpx;
}

.search-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.order-tabs {
	display: flex;
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #333;
}

.tab-item.active {
	color: #ff6633;
	font-weight: bold;
	position: relative;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background-color: #ff6633;
}

.order-list {
	padding: 20rpx;
}

.order-item {
	background-color: #fff;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
}

.order-header {
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
	font-size: 26rpx;
}

.order-number {
	color: #666;
}

.order-status {
	font-weight: bold;
}

.status-wait-pay {
	color: #ff6633;
}

.status-wait-share {
	color: #ff9900;
}

.status-wait-ship {
	color: #ff6633;
}

.status-wait-receive {
	color: #5c8aff;
}

.status-wait-comment {
	color: #33cc99;
}

.order-content {
	display: flex;
	padding: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.product-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 10rpx;
	background-color: #f5f5f5;
	object-fit: cover;
}

.product-info {
	flex: 1;
	margin-left: 20rpx;
	position: relative;
}

.product-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
}

.product-sku {
	font-size: 24rpx;
	color: #999;
}

.group-tag {
	position: absolute;
	top: 0;
	left: 0;
}

.group-tag-icon {
	width: 60rpx;
	height: 30rpx;
}

.product-price-info {
	text-align: right;
	margin-left: 10rpx;
}

.product-price {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.product-count {
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
}

.order-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
}

.order-info {
	text-align: left;
}

.total-price {
	font-size: 26rpx;
	color: #333;
}

.order-time {
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
}

.order-tracking {
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
}

.order-actions {
	display: flex;
}

.btn {
	margin-left: 20rpx;
	padding: 10rpx 30rpx;
	font-size: 24rpx;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 6rpx;
}

.btn-cancel {
	border: 1rpx solid #999;
	color: #333;
	background-color: #fff;
}

.btn-pay {
	background-color: #ff6633;
	color: #fff;
}

.btn-share {
	background-color: #ff9900;
	color: #fff;
}

.btn-track {
	border: 1rpx solid #ff6633;
	color: #ff6633;
	background-color: #fff;
}

.btn-confirm {
	background-color: #5c8aff;
	color: #fff;
}

.btn-review {
	background-color: #33cc99;
	color: #fff;
}

.btn-rebuy {
	border: 1rpx solid #33cc99;
	color: #33cc99;
	background-color: #fff;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.empty-icon {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	color: #999;
	font-size: 28rpx;
}
</style>
